<template>
    <div class="cloud-shot-container">
        <div class="left animate__animated animate__fadeIn">
            <img :src="require('@/assets/images/cloudShot_left_img.png')" />
        </div>
        <div class="right">
            <div
                class="r_item animate__animated animate__fadeInUp"
                v-for="item in cardInfo"
                :key="item.id"
            >
                <div class="card_img">
                    <img :src="item.imgUrl" />
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="sub_title">
                    <span
                        >交易状态：<span>{{ item.state }}</span></span
                    >
                </div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "CloudShot",
    data() {
        return {
            subCardInfo: [
                {
                    id: 1,
                    imgUrl: require("@/assets/images/online_icon01.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/online_icon02.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 3,
                    imgUrl: require("@/assets/images/online_icon01.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
                {
                    id: 4,
                    imgUrl: require("@/assets/images/online_icon02.jpg"),
                    title: "讯飞智元信息科技有限公司",
                    desc: "讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的讯飞智元信息科技有限公司秉承“用人工智能建设美好城市”的崇高使命，依托智能语音和人工智能的",
                },
            ],
            cardInfo: [
                {
                    id: 1,
                    imgUrl: require("@/assets/images/cloudShot_right_img01.jpg"),
                    title: "咸丰县坪坝营镇青林湾矿区饰面用灰岩矿",
                    state: "正在公告",
                },
                {
                    id: 2,
                    imgUrl: require("@/assets/images/cloudShot_right_img02.jpg"),
                    title: "湖北省松滋市王家淌矿区水泥用石灰岩矿",
                    state: "正在公告",
                },
                {
                    id: 3,
                    imgUrl: require("@/assets/images/cloudShot_right_img03.jpg"),
                    title: "咸丰县坪坝营镇青林湾矿区饰面用灰岩矿",
                    state: "正在公告",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.cloud-shot-container {
    color: #ffffff;
    .main-bg();
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 30px;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("~@/assets/images/cloudShot_bg.jpg") top left no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
    .left {
        width: 264px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 50px;
        z-index: 2;
        img {
            display: block;
        }
    }
    .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        z-index: 2;
        .r_item {
            width: 32%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 15px 20px 40px;
            transition-duration: 0.4s;
            cursor: pointer;
            &:nth-child(2) {
                animation-delay: 0.2s;
            }
            &:nth-child(3) {
                animation-delay: 0.3s;
            }
            &:hover {
                box-shadow: 0 0 10px #198dff;
                .btn {
                    height: 30px;
                    line-height: 30px;
                    color: #ffffff;
                    transform: translateY(-2px);
                    box-shadow: 0 0 5px #198dff;
                    background-image: linear-gradient(
                        to right,
                        #198dff,
                        #4dc3ff
                    );
                    border: 0;
                }
            }
            .card_img {
                width: 100%;
                flex: 1;
                border: 1px solid #dddddd;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title {
                padding: 0 30px;
                text-align: center;
                font-size: 15px;
                color: #222222;
                line-height: 25px;
                margin-top: 20px;
            }
            .sub_title {
                font-size: 12px;
                color: #666666;
                line-height: 25px;
                margin: 15px 0;
                span {
                    color: #ff7f00;
                }
            }
            .btn {
                .hollow-btn();
                padding: 0 40px;
            }
        }
    }
}
</style>